<template>
		<div>
			<div v-for="(item,index) in info" :key="index">
				<!--@click="goDetail(item.ProductId)"-->
				<div class="service_item ptb-24" >				
					<div class="service_img">
						<img-box class="classImg br-16 ofh" :img-url="item.ProductModel.ThumbnailUrl410" />
					</div>
					<div class="ml-24 service_content">
						<div>
							<div class="service_name">{{ item.ProductModel.ProductName }}</div>
							<div class="right-box-text color-gray7 text-show-line-1" v-if="item.ProductModel.TagsList && item.ProductModel.TagsList.length > 0">
								<span>{{ item.ProductModel.ServiceDuration }}分钟</span>
								<span v-for="(items,index) in item.ProductModel.TagsList" :key="index">{{ items.Name }}</span>
							</div>
							<div class="right-box-text color-gray7 text-show-line-1 " v-else>
								<span>{{ item.ProductModel.ServiceDuration }}分钟</span>
							</div>
						</div>				
						<div class="mt-36 flex flex-s-c">
							<div><span class="service_unit fs-28">￥</span><span class="service_price">{{ item.ProductModel.V_GradePrice ? item.ProductModel.V_GradePrice.toFixed(2) : ''}}</span></div>
							<div class="flex-1 tar flex-fe-c" v-for="(iitem, index) in item.ProductModel.ProductSkuList" :key="index">
								<van-stepper v-model="iitem.Amount" theme="round" button-size="24" min="0" integer @change="changeAmount(iitem)" />
							</div>
							<!--<div class="flex-1 tar flex-fe-c" v-for="(iitem, index) in item.ProductModel.ProductSkuList" :key="index">
								<span
									class="btn-minus flex-s-0 "
									:class="iitem.Amount <= 0 ? 'color-shadow' : ''"
									@click="changeAmount(iitem, iitem.Amount, iitem.Stock, -1, changeData.MinNum, activeUnitRatio, iitem.LimitBuy)"
								>-</span>
								<div class="btn-input-box">
									<input
										v-model="iitem.Amount"
										type="number"
										class="btn-input"
										@blur="changeAmount(iitem, iitem.Amount, iitem.Stock, 0, changeData.MinNum, activeUnitRatio, iitem.LimitBuy)"
									>
								</div>
								<span
									class="btn-plus flex-s-0"
									@click="changeAmount(iitem, iitem.Amount, iitem.Stock, 1, changeData.MinNum, activeUnitRatio, iitem.LimitBuy)"
								>+</span>
							</div>-->
						</div>
					</div>
				</div>
		</div>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
export default {
	name: 'service',
	components: {
		imgBox
  },
	props: {  
		info: {
      type: Array,
      required: true
    },	
  },
	data() {
    return {			
      changeData: {},			
      activeUnitRatio: 1,
			cartRequestList: []
		}
	},
	created() {
		console.log(this.info,"sss")
		if(this.info && this.info.length > 0){
			this.info.forEach(ele => {
				const item = ele.ProductModel.ProductSkuList[0]
				if(item.Amount > 0){
					const _obj = {}
					_obj.Amount = item.Amount
					_obj.ProductId = item.ProductId
					_obj.SkuId = item.ID
					_obj.Source = 0
					_obj.StoreId = 0
					_obj.V_GradePrice = item.V_GradePrice
					this.cartRequestList.push(_obj)
				}
			})
		}
  },
	methods:{
		goDetail(id) {
      this.scollRequest = false 
			this.$router.push({
				path: '/physioServiceDetail',
				 query: {
          productId: id,
				 }
       })
    
    },
		changeAmount(item){
			const _obj = {}
      _obj.ProductId = item.ProductId
      _obj.Amount = item.Amount
      _obj.SkuId = item.ID
      _obj.Source = 0
      _obj.StoreId = item.StoreId
			_obj.V_GradePrice = item.V_GradePrice
			this.cartRequestList = this.cartRequestList.filter((ele) => {
      	return ele.ProductId != item.ProductId
      }); 
      this.cartRequestList.push(_obj)
			this.$emit('updateCart',this.cartRequestList)
		}
		//changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy) {			
		//	console.log(item,num,"数量")
		//	item.Amount = num
    //  this.$utils. changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy) 
    //  const _obj = {}
    //  _obj.ProductId = item.ProductId
    //  _obj.Amount = item.Amount
    //  _obj.SkuId = item.ID       
    //  _obj.Source = 0			
    //  _obj.StoreId = item.StoreId
		//	_obj.V_GradePrice = item.V_GradePrice			
		//	this.cartRequestList = this.cartRequestList.filter((ele) => {
    //  	return ele.ProductId != item.ProductId
    //  }); 
    //  this.cartRequestList.push(_obj)
		//	this.$emit('updateCart',this.cartRequestList)
    //},
		
	}
}
</script>
<style lang="scss" scoped>
	.service_item{
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid #F2F3FC;
	}
	.service_item:last-child{		
		border-bottom: none;
	}
	
	.service_name{
		font-size: 32px;
		color: $black2;
		margin-bottom: 12px;
	}

	.service_unit{
		color: #EC612A;
	}
	.service_price{
		font-size: 36px;
		font-weight: bold;
		color: #EC612A;
		margin-right: 8px;
	}
	.service_content{
		width: calc(100% - 224px);
		display: flex;
    flex-direction: column;
    justify-content: space-between;
	}
	.btn-minus{	
		background: #F2F2F2;
		border-radius: 50%;
	}
	.btn-plus{
		background: $physio-primary1;
		border-radius: 50%;
		color: #fff;
	}
	.right-box-text	span{
		background-color: #F2F3FC;
		padding: 4px 8px;
		border-radius: 4px;
		text-align: center;
		margin-right: 10px;
	}
	
	
	.service_img{
		width: 224px;
		height: 180px;
		border-radius: 16px;
	}
	.classImg{
		width: 224px;
		height: 180px;
	}
	.btn-input-box{
		position: relative;
		margin: 0 4px;
		.btn-input{
			position: relative;
			z-index: 1;
			height: 56px;
			width: 50px;
			line-height: 1;
			border: none;
			text-align: center;
			-webkit-appearance: none;
		}
	}
	/deep/.van-stepper--round .van-stepper__minus {
    color: #333;
    border: 1px solid #f2f2f2;
    background: #f2f2f2;
	}
	/deep/.van-stepper--round .van-stepper__plus {
    color: #fff;
    background-color: #24c373;
	}
</style>

